<template>
  <div v-if="visible">
    <Card>
      <FormItem label="排班预览">
        <Calendar v-model:visible="visible">
          <template #dateCellRender="{ current }">
            <template v-for="item in dutyArr" :key="item.date">
              <Timeline v-if="current.date() == item.date">
                <TimelineItem v-for="it in item.previewDutyItemList" :key="it.timeRange">{{
                  item.previewDutyItemList
                }}</TimelineItem>
              </Timeline>
            </template>
          </template>
        </Calendar>
      </FormItem>
    </Card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Card, FormItem, Calendar, Timeline, TimelineItem } from 'ant-design-vue';

import { SchedulePreview } from '/@/api/work-order/userManagement/userGroup/model/userGroupModel';

const dutyArr = ref<SchedulePreview[]>([]);
const visible = ref(false);

const openCalendar = async (formState) => {
  let fastScheduleParam = formState;
  const date = new Date();
  fastScheduleParam.startDate = date;
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  fastScheduleParam.endDate = new Date(year, month, 0).getDate();

  // dutyArr.value = await getFastSchedule(fastScheduleParam);
  dutyArr.value = [
    {
      date: '123',
      previewDutyItemList: [
        {
          dutyWorksheetUserList: [
            {
              id: 345,
              name: 'aaaa',
            },
          ],
          timeRange: '00~04',
        },
      ],
    },
    {
      date: '234',
      previewDutyItemList: [
        {
          dutyWorksheetUserList: [
            {
              id: 44,
              name: 'bbbb',
            },
          ],
          timeRange: '04~08',
        },
      ],
    },
  ];
  visible.value = true;
};

defineExpose({ openCalendar });
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
